<template>
	<view class="page">
		<view class="page__month">
			<view class="">月度选择：</view>
			<view class="" style="border-bottom: 1rpx solid #007AFF;" @click="dateVisible = true">{{compMonth}}</view>
		</view>
		<view class="page__header">
			<view class="page__header--left" style="margin-bottom: 20rpx;">
				<view class="" style="display: flex;align-items: center;font-size: 35rpx;">月度电耗</view>
				<view class="" style="text-align: right;">
					<text style="font-size: 40rpx;font-weight: bold;">{{monthKwh}}</text>
					<text style="margin-left: 10rpx;">kwh</text>
				</view>
			</view>
			<view class="page__header--right">
				<view class="" style="display: flex;align-items: center;font-size: 35rpx;">年度电耗</view>
				<view class="" style="text-align: right;"> 
					<text style="font-size: 40rpx;font-weight: bold;">{{yearKwh}}</text>
					<text style="margin-left: 10rpx;">kwh</text>
				</view>
			</view>
		</view>
		<view class="page__chart">
			<chart :chartData="chartData" :option="option"></chart>
		</view>
		<view class="page__body">
			<view class="page__body--list" v-for="item in list">
				<view class="">
					<text>{{item.Val}}</text>
				</view>
				<view class="" style="display: flex;">
					<u-tag :text="compDay(item.DateTime)" plain size="mini" type="warning" :borderColor="compDay(item.DateTime) == '今日' ? 'blue' : 'red'" :color="compDay(item.DateTime) == '今日' ? 'blue' : 'red'" v-if="compDay(item.DateTime) == '今日' || compDay(item.DateTime) == '昨日'"></u-tag>
					<text style="margin-left: 20rpx;">{{item.DateTime}}</text>
				</view>
			</view>
			<no-data v-if="!list.length"></no-data>
		</view>
		 <u-datetime-picker
				:show="dateVisible"
				v-model="month"
				mode="year-month"
				@cancel="dateVisible = false"
				@confirm="confirmDate"
		></u-datetime-picker>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import moment from 'moment'
	import {formatTime,getTableSuffix} from '@/common/custom_util.js'
	import NoData from '@/components/custom/no-data/no-data.vue'
	import PopBox from '@/components/custom/pop-box/index.vue'
	import Chart from '@/components/custom/chart/chart.vue'
	
	export default {
		components: {
			NoData,
			PopBox,
			Chart
		},
		data() {
			return {
				device: {},
				month: moment().format('YYYY-MM'),
				year: moment().format('YYYY'),
				monthKwh: '',
				yearKwh: '',
				list: [],
				dateVisible: false,
				tablesuffix: getTableSuffix(),
				chartData: {
					series: [
						{
							name: '电耗',
							type: 'line',
							showAllSymbol: true,
							symbolSize: 3,
							smooth: true,
							label: {
								show: false
							},
							lineStyle: {
								normal: {
									width: 4,
									color: "#2560F7", // 线条颜色
								},
								borderColor: 'rgba(0,0,0,.4)',
							},
							itemStyle: {
								color: "#2560F7",
								borderColor: "#646ace",
								borderWidth: 2
							},
							tooltip: {
								show: true
							},
							data: []
						  },
					]
				},
				option: {
					title: {
						text: '每日电耗折线图',
						textStyle: {
							fontSize: 14,
							fontWeight: 'normal',
						},
						left: 'center'
					},
					legend: {
						align: "left",
						right: '1%',
						top: '3%',
						type:'plain',
						textStyle:{
							color:'#000',
							fontSize: 12
						},
						// icon:'rect',
						itemGap:15,
						itemWidth:15,
						icon:'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
					},
					grid: {
						top: '20%',
						left: '14%',
						right: '3%',
						bottom: '15%',
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						axisLine: { //坐标轴轴线相关设置。数学上的x轴
							show: true,
							lineStyle: {
								color: '#EDECF0'
							},
						},
						axisLabel: { //坐标轴刻度标签的相关设置
							showMaxLabel: true,
							textStyle: {
								color: '#C4C4C4',
								fontSize: 14
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#EDECF0'
							},
						},
						axisTick: {
							show: false,
						},
						data: []
					}],
					yAxis: [{
						name: '',
						nameTextStyle: {
							color: "#C4C4C4",
							fontSize: 14,
							padding: [20,0,0,-45]
						},
						min: 0,
						splitLine: {
							show: true,
							lineStyle: {
								color: '#EDECF0'
							},
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: "#EDECF0"
							}
					
						},
						axisLabel: {
							show: true,
							fontSize: 14,
							textStyle: {
								color: '#C4C4C4',
							},
						},
						axisTick: {
							show: false,
						},
					}],
				}
			}
		},
		onLoad(options) {
			this.getCnlDataMonthSumMergeList();
			this.getKwhMonthData();
		},
		computed: {
			compMonth() {
				return moment(this.month).format('YYYY-MM')
			},
		},
		methods: {
			/**
			 * 获取年度电耗
			 */
			getCnlDataMonthSumMergeList() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getCnlDataMonthSumMergeList',
					apiparam: {
						cnlcode: 'Y2G2M03LL',
						mergetag: 1,//年进口
						obsyear: this.year
					},
					success(res) {
						let val = 0
						for (let i = 0; i < res.length; i++) {
							val += (res[i].TotalVal * 1)
						}
						val = (val * 1).toFixed(0)
						if(isNaN(val) || !isFinite(val)) {
							that.yearKwh = 0
							return
						}
						that.yearKwh = val
					},
				})
			},
			/**
			 * 获取月度每日电耗
			 */
			getKwhMonthData() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getKwhMonthData',
					apiparam: {
						tablesuffix: this.tablesuffix,
					},
					success(res) {
						if(!res.length) {
							that.option.xAxis[0].data = []
							that.chartData.series[0].data = []
							that.list = []
							that.monthKwh = 0
							return
						}
						that.list = JSON.parse(JSON.stringify(res))
						let data = res.reverse()
						let label = []
						let monthKwh = 0;
						let list = data.map(item => {
							monthKwh += item.Val*1
							let day = moment(item.DateTime).format('DD')
							label.push(day)
							return [day,item.Val]
						})
						that.monthKwh = monthKwh;
						that.option.xAxis[0].data = label
						that.chartData.series[0].data = list
					},
					fail() {
						that.option.xAxis[0].data = []
						that.chartData.series[0].data = []
						that.list = []
						that.monthKwh = 0
					}
				})
			},
			/**
			 * 时间选择确认
			 */
			confirmDate(e) {
				this.month = e.value;
				this.tablesuffix = getTableSuffix(moment(e.value).format('YYYY'),moment(e.value).format('MM'))
				this.getKwhMonthData();
				let year = moment(this.month).format('YYYY')
				if(this.year != year) {
					this.year = year
					this.getCnlDataMonthSumMergeList();
				}
				this.dateVisible = false;
			},
			compDay(v) {
				if(v == moment().format('YYYY-MM-DD')) {
					return '今日'
				}
				if(v == moment().subtract(1, 'days').format('YYYY-MM-DD')) {
					return '昨日'
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		
		&__month {
			height: 100rpx;
			display: flex;
			align-items: center;
			background-color: #fff;
			padding-left: 20rpx;
		}
		
		&__header {
			height: 300rpx;
			margin: 0 20rpx;
			margin-bottom: 20rpx;
			box-sizing: border-box;
			
			&--left,&--right {
				height: 50%;
				color: #fff;
				box-sizing: border-box;
				background-color: #00B26A;
				border-radius: 10rpx;
				
				view {
					height: 50%;
					padding: 0 40rpx;
				}
			}
		}
		
		&__chart {
			height: 400rpx;
			background-color: #fff;
			padding: 40rpx 20rpx;
			box-sizing: border-box;
			margin: 20rpx 0;
		}
		
		&__body {
			
			&--list {
				margin-bottom: 20rpx;
				background-color: #fff;
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
			}
		}
	}
	
	.day-pop {
		max-height: 450rpx;
		overflow-y: scroll;
		
		&__list {
			background-color: #fff;
			
			&--hover {
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
			}
		}
	}
</style>
